<template>
  <div class="paySuccess">
    <div class="title">
      <navTitle :navArr="navArr"></navTitle>
    </div>
    <div class="payContent">
      <h2>
        <i class="el-icon-success"></i>
        恭喜您已成功支付
      </h2>
      <h3>
        我们的快递单号会在10分钟 - 30分钟内提前给到您, 请至订单列表处下载
      </h3>
      <p>
        <strong>16:30前</strong>
        的订单会在
        <strong>当天</strong>
        将您的礼品全部寄出,
        <strong>16:30后</strong>
        的订单最晚会在
        <strong>隔天17:00</strong>
        全部寄出
        <br> 您可以在我的订单中查看到具体每一个包裹的物流状态及快递单号
        <!-- （
        <em>{{ lastTime }}s</em>
        后自动返回至首页） -->
      </p>
    </div>
    <div class="footer">
      <b class="button-w" @click="toWhere('orderManger', 'orderId')">查看包裹详情</b>
      <b class="button-n" @click="toWhere('ordersNow')">继续下单</b>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import NavTitle from '../../base/navTitle/index'
export default {
  name: 'paySuccess',
  components: {
    NavTitle
  },
  data () {
    return {
      navArr: ['立即采购'],
      lastTime: 5,
      time: ''
    }
  },
  methods: {
    toWhere (route, query) {
      clearInterval(this.time)
      if (query) {
        this.$router.push({ name: route, query: { orderId: this.$route.query.orderId } })
      } else {
        this.$router.push({ name: route })
      }
    }
  },
  mounted () {
    // this.time = setInterval(() => {
    //   this.lastTime--
    //   if (this.lastTime <= 0) {
    //     this.toWhere('ordersNow')
    //   }
    // }, 1000)
  }
  // beforeDestroy () {
  //   clearInterval(this.time)
  // }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.paySuccess
  .payContent
    margin 40px 50px
    background #F5F7FA
    padding 40px 80px
    h2
      fontSize(24px, 1, $fontColor)
      font-weight bold
      margin-bottom 28px
      i
        color $fontColor-o
        margin-right 18px
    h3
      fontSize(20px, 30px, $mainColor)
    p
      fontSize($fontSize-m, 30px, $fontColor)
      strong
        color $fontColor-o
      em
        color $textBtnColor
  .footer
    margin-top 65px
    text-align center
</style>
